import React, { Component } from "react";
import Header from "./header";
import Main from "./main";
/*
作业：
实现天天象上首页,完成全国名师推荐模块
假设首页面是home

点击全国名师推荐的老师头像进入对应详情页面

详情页面内容包含
1、名字
2、头像
3、老师级别
4、老师所在学校

--跳转：
http://localhost:3000/
http://localhost:3000/news
http://localhost:3000/home

--全国名师详情：
http://localhost:3000/teacher/1
http://localhost:3000/teacher/2
http://localhost:3000/teacher/3

--开发流程：
界面开发  3-5天
功能开发  2天 tab，轮播，下拉菜单
业务开发  7-10天
前后端联调  3-4天

--界面：
1块得做好 复制4份

--scss：
变量、公共模块

--PS：
ctrl+shift+c 复制图层
ctrl+n 新建
ctrl+v 粘贴
ctrl+alt+shift+s 保存
智能转换对象

--git的使用：
https://blog.bdplus.cn/archives/3163
GIT + PS + CODE + 浏览器

--react：
props state
props 怎么用？
1.<Child name="小明"/>
this.props.name
2.this.props.children---公共组件
父组件:
<H3 name="标题一"/>
<H3 name="标题二"/>
<H3 name="标题三">
  <ul><li>tab1</li></ul>
</H3>
<H3 name="标题四">
  <a className="more fr" href="true">更多》</a>
</H3>
子组件:
<div className="h3 clearfix">
  <h3 className="fl">{this.props.name}</h3>
  {this.props.children}
</div>
3.左右两侧不同的title，以组件的形式接受
<Child left={<Left title=""/>}/>
<div className="b_left"></div>
<div className="b_right"></div>
4.子组件调用父组件的方法
callback 以参数的形式接受

--react create：
...npx 路由 axios 打包 scss

--react 路由:
yarn add
外围--一次性的
Route to
exact
404
App.js 页面路由定义
info/index.jsx
match
withRouter---让子页面可以使用match，history等

--页面：
styles/bg_img/a
      bg_img/b
      index.scss
images/ 要删的

images：banner，老师头像，个人中心头像，商品图片，详情图片，logo是一个图片，不是背景图
bg_img：小图标

--public：index.html base.scss

h5项目：
index.html
mb.scss
an.scss

context hook
mbox redux
*/
import Detail from "./detail";
class View extends Component {
  render() {
    return (
      <React.Fragment>
        {!this.props.match.params.id ? (
          <React.Fragment>
            {/* 头部 */}
            <Header />
            {/* banner */}
            <div className="banr">
              <img
                src={require("../../images/banner.jpg").default}
                alt=""
                className="m"
              />
            </div>
            {/* 中间内容 */}
            <Main></Main>
            {/* 底部 */}
            <div className="foot">
              <div className="foot_select">
                <ul className="fot_selTxt m clearfix">
                  <li>
                    <b>天天课堂</b>
                    <span>名师专属的数学资源库</span>
                    <span>与全国名师一起探讨制作微课！</span>
                    <a href="true">进入课堂</a>
                  </li>
                  <li>
                    <b>我是老师</b>
                    <span>20000+位名师已在这里开课</span>
                    <span>用你的精彩微课来赚钱吧~</span>
                    <a href="true">教室入驻</a>
                  </li>
                </ul>
              </div>
              <div className="footer">
                <ul className="footer_top clearfix">
                  <li>
                    <i></i>
                    <span className="fotop_txt">
                      <span>在职教师</span>
                      <span>真实可靠</span>
                    </span>
                  </li>
                  <li>
                    <i></i>
                    <span className="fotop_txt">
                      <span>名师信息</span>
                      <span>人工审核</span>
                    </span>
                  </li>
                  <li>
                    <i></i>
                    <span className="fotop_txt">
                      <span>教学内容</span>
                      <span>独家传授</span>
                    </span>
                  </li>
                  <li>
                    <i></i>
                    <span className="fotop_txt">
                      <span>中国教师慕课学院</span>
                      <span>唯一指定合作机构</span>
                    </span>
                  </li>
                </ul>
                <div className="footer_bto">
                  <div className="footer_txt m">
                    <ul className="ftxt_top">
                      <li>
                        <span>友情链接：</span>
                      </li>
                      <li>
                        <a href="true">百度教育</a>
                      </li>
                      <li>
                        <a href="true">中国教育部</a>
                      </li>
                      <li>
                        <a href="true">中国教育网络</a>
                      </li>
                      <li>
                        <a href="true">中国教育在线</a>
                      </li>
                      <li>
                        <a href="true">中国教育新闻</a>
                      </li>
                      <li>
                        <a href="true">新华网教育</a>
                      </li>
                      <li>
                        <a href="true">人民网教育</a>
                      </li>
                      <li>
                        <a href="true">更多链接&gt;&gt;</a>
                      </li>
                    </ul>
                  </div>
                </div>
              </div>
            </div>
          </React.Fragment>
        ) : (
          <Detail id={this.props.match.params.id} />
        )}
      </React.Fragment>
    );
  }
}

export default View;
